<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>型号核查</title>
        <link rel="stylesheet" type="text/css" href="/webapp/css/easyui.css">
        <link rel="stylesheet" type="text/css" href="/webapp/css/icon.css">
        <link rel="stylesheet" type="text/css" href="/webapp/css/color.css">
        <link rel="stylesheet" type="text/css" href="/webapp/css/public.css">
        <script type="text/javascript" src="/webapp/js/lib/jquery.min.js"></script>
        <script type="text/javascript" src="/webapp/js/lib/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="/webapp/js/lib/jquery.global.settings.js"></script>
        <script type="text/javascript" src="/webapp/js/lib/ajaxfileupload.js"></script>
        <script type="text/javascript" src="/webapp/js/common/metadata.js"></script>
        <script type="text/javascript" src="/webapp/js/common/config.js"></script>

    </head>
    <body>
        <div class="easyui-container-fluid">
            <div class="easyui-panel" style="border: none;">
                <div class="nav" id="nav"></div>
                <div class="easyui-panel" style="border:none;">
                    <form id="ff">
                        <span>
                             <label class="item-label">年份：</label>
                             <input type="text" class="easyui-combobox" name="year" id="year" style="width:100px;"/>
                     	</span>
                        <span id="monthLabel">
	                         <label class="item-label">月份：</label>
	                         <input type="text" class="easyui-combobox" name="month" id="month" style="width:100px;"/></span>
                        <span id="weekLabel">
	                         <label class="item-label">周数：</label>
	                         <input type="text" class="easyui-combobox" name="week" id="week" style="width:100px;"/></span>
                        <label class="item-label">品类：</label>
                        <select id="categorySelect" name="categoryCode" class="easyui-combobox" style="width:100px;">
                        </select>
                        <label class="item-label" style="width: 50px;margin-left: 20px;">规格：</label>
                        <input type="text" name="propCode" id="propCode" class="easyui-combobox" data-options="panelHeight:'150'" style="width:100px;" />
                        <select name="comparator" id="comparator"  class="easyui-combobox" data-options="panelHeight:'150'" style="width:100px;"   >
                            <option value="EQUAL">=</option>
                            <option value="GREAT">></option>
                            <option value="GREAT_EQUAL">>=</option>
                            <option value="LITTLE"><</option>
                            <option value="LITTLE_EQUAL"><=</option>
                            <option value="NOT_EQUAL"><></option>
                        </select>
                        <div style="display: inline-block" id="metadatavalue" >
                        </div>
                        <label class="item-label">条件：</label>
                        <input id="queryReq" class="easyui-switchbutton" checked style="width:80px;height:30px;" onText="ALL" offText="NONE">
                        <a href="javascript:void(0);" class="easyui-linkbutton c8" onclick="searchBy()" style="width:80px;margin-left: 40px;">查询</a>
                        <br>
                        <br>
                        <div style="" id="categorywrapper">
                            <label class="item-label">规格1：</label>
                            <input type="text" name="propCode1" id="propCode1" class="easyui-combobox" style="width:100px;" data-options="panelHeight:'auto'"/>
                            <label class="item-label">规格2：</label>
                            <input type="text" name="propCode2" id="propCode2" class="easyui-combobox" style="width:100px;" data-options="panelHeight:'auto'"/>
                            <label class="item-label">规格3：</label>
                            <input type="text" name="propCode3" id="propCode3" class="easyui-combobox" style="width:100px;" data-options="panelHeight:'auto'"/>
                            <label class="item-label">规格4：</label>
                            <input type="text" name="propCode4" id="propCode4" class="easyui-combobox" style="width:100px;" data-options="panelHeight:'auto'"/>
                            <label class="item-label">规格5：</label>
                            <input type="text" name="propCode5" id="propCode5" class="easyui-combobox" style="width:100px;" data-options="panelHeight:'auto'"/>
                        </div>
                        <br>
                    </form>
                </div>
                <div class="table-wrapper">
                    <table id="datagrid" data-options="fitColumns:true,scrollBarSize:0">
                        <thead>
                            <tr>
                                <th data-options="field:'modelCode',align:'center'" width="8%">代码</th>
                                <th data-options="field:'modelName',align:'center'" width="15%">型号</th>
                                <th data-options="field:'brandName',align:'center'" width="10%">品牌</th>
                                <th data-options="field:'properties1',align:'center',formatter:valueFormatter1" width="10%">规格1</th>
                                <th data-options="field:'properties2',align:'center',formatter:valueFormatter2" width="10%">规格2</th>
                                <th data-options="field:'properties3',align:'center',formatter:valueFormatter3" width="10%">规格3</th>
                                <th data-options="field:'properties4',align:'center',formatter:valueFormatter4" width="10%">规格4</th>
                                <th data-options="field:'properties5',align:'center',formatter:valueFormatter5" width="10%">规格5</th>
                                <th data-options="field:'action',align:'center',formatter:actionFormatter" width="15%">操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $(function () {
            setNav();
            initMonthWeek("monthLabel", "weekLabel");

            // initUserCategorySelect("categorySelect", showRule);
            initUserCategorySelect("categorySelect",function (code) {
                initModelSearchSelect("propCode","metadatavalue",code);
                showRule();
            });
            var height = $(window).height();
            var nav_height = $("#nav")._outerHeight();
            var ff_height = $("#ff").height();
            var table_height = height - nav_height - ff_height - 40;
            $("#datagrid").css("max-height", table_height);
            $("#datagrid").datagrid({
                rownumbers: true,
                pagination: true,
                idField: "id",
                checkOnSelect: false,
            }).datagrid("getPager").pagination({
                onSelectPage: searchBy
            });
            aRecords("型号核查","/webapp/pages/product/audit/modelCheck")
        });
        //显示规格
        function showRule() {
            let categoryCode = $("#categorySelect").combobox('getValue');
            $.ajax({
                url: config.url + "/categoryMetadata/getNameByCategoryCode?categoryCode=" + categoryCode,
                type: "get",
                xhrFields: {withCredentials: true},
                success: function (data) {
                    if (data) {
                        var obj_map = {};
                        data.unshift({"name": "", "code": ""});
                        var propcodes = ["propCode1", "propCode2", "propCode3", "propCode4", "propCode5"];
                        propcodes.forEach(p => {
                            $("#" + p).combobox({
                                textField: "name",
                                valueField: "code",
                                prompt: "--请选择--",
                                panelHeight: "200px",
                                data: data,
                            });
                        });

                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            });
        }

        function searchBy(page,size) {
                var dtd = $.Deferred();
            var data = getFormData(document.getElementById("ff"));
            var propValue = data.propValue;
            if(!Array.isArray(propValue)){
                data.propValue = [propValue];
            }

            data['reportType'] = window.parent.workMode.toUpperCase();
            var pager = {page:page,size:size};
            if(!size){
                pager['page']= 1;
                pager['size'] = $("#datagrid").datagrid("getPager").pagination("options").pageSize||100;
            }
            var jsonobj = {};
            jsonobj = $.extend(true,jsonobj,transfer(data));
            jsonobj = JSON.stringify(jsonobj);
            $.ajax({
                url:config.url + "/modelCheck/page?"+transfer2url(pager),
                type:'post',
                data:jsonobj,
                contentType:"application/json;charset=UTF-8",
                dataType:'json',
                xhrFields:{withCredentials:true},
                beforeSend: function () {
                    $.messager.progress({
                        title: "请稍等",
                        interval: 50,
                        text: "数据加载中..."
                    });
                },
                success: function (data) {
                    $.messager.progress("close");
                    if (data) {
                        $("#datagrid").datagrid("loadData",initData(data));
                        dtd.resolve();

                        // v content = initData(data);
                        // $("#datagrid").datagrid("loadData", content);
                    } else {
                        $.messager.alert("提示", data.msg, "error");
                    }
                },
                error: function (data) {
                    $.messager.progress("close");
                }
            });
        }

        //是否需要清除非空数据
        function initData(data) {
            let query = $("#queryReq").switchbutton("options").checked;
            if (query) {
                return data;
            }
            let propCode1 = $("#propCode1").combobox("getValue");
            let propCode2 = $("#propCode2").combobox("getValue");
            let propCode3 = $("#propCode3").combobox("getValue");
            let propCode4 = $("#propCode4").combobox("getValue");
            let propCode5 = $("#propCode5").combobox("getValue");
            let content = data.content;
            for (var i = 0; i < content.length; i++) {
                let flag = false;   //是否是空规格的数据
                let properties = content[i].properties;
                //有些型号数据库都没有存某个规格的code，所以加个标识表示是否判断过
                let propCode1Flag = propCode1 ? false : true;
                let propCode2Flag = propCode2 ? false : true;
                let propCode3Flag = propCode3 ? false : true;
                let propCode4Flag = propCode4 ? false : true;
                let propCode5Flag = propCode5 ? false : true;

                for (let prop of properties) {
                    if (prop.code == propCode1) {
                        propCode1Flag = true;
                        if (prop.value === undefined || prop.value === "") {
                            flag = true;
                            break;
                        }
                    } else if (prop.code == propCode2) {
                        propCode2Flag = true;
                        if (prop.value === undefined || prop.value === "") {
                            flag = true;
                            break;
                        }
                    } else if (prop.code == propCode3) {
                        propCode3Flag = true;
                        if (prop.value === undefined || prop.value === "") {
                            flag = true;
                            break;
                        }
                    } else if (prop.code == propCode4) {
                        propCode4Flag = true;
                        if (prop.value === undefined || prop.value === "") {
                            flag = true;
                            break;
                        }
                    } else if (prop.code == propCode5) {
                        propCode5Flag = true;
                        if (prop.value === undefined || prop.value === "") {
                            flag = true;
                            break;
                        }
                    }
                }
                //如果所有的规格都判断过，且都不为空，则pass掉
                if (!flag && propCode1Flag && propCode2Flag && propCode3Flag && propCode4Flag && propCode5Flag) {
                    content.splice(i, 1); // 将使后面的元素依次前移，数组长度减1
                    i--; // 如果不减，将漏掉一个元素
                }
            }
            data.totalElements = content.length;
            return data;
        }

        function valueFormatter1(val, row) {
            return publicValue(row, "propCode1");
        }

        function valueFormatter2(val, row) {
            return publicValue(row, "propCode2");
        }

        function valueFormatter3(val, row) {
            return publicValue(row, "propCode3");
        }

        function valueFormatter4(val, row) {
            return publicValue(row, "propCode4");
        }

        function valueFormatter5(val, row) {
            return publicValue(row, "propCode5");
        }

        function publicValue(row, id) {
            let propCode = $("#" + id).combobox("getValue");
            if (propCode) {
                for (let m of row.properties) {
                    if (m.code == propCode) {
                        if (m.value == 'true' || m.value === true) {
                            return '是';
                        } else if (m.value == 'false' || m.value === false) {
                            return '否';
                        }
                        return m.value;
                    }
                }
                return "";
            }else {
                return "--";
            }

        }

        function actionFormatter(val, row) {
            return "<a href='javascript:void(0);' class='easyui-linkbutton l-btn l-btn-small' " +
                "style='width:60px;' onclick='edit(\"" + row.modelId + "\",\"" + row.categoryCode + "\")'>修改</a>&nbsp;&nbsp;";
        }

        //修改页面
        function edit(id, categoryCode) {
            window.parent.addTab("修改型号", "/webapp/pages/product/model/add.html?id=" + id + "&categoryCode=" + categoryCode);
        }
    </script>
</html>